import React from 'react';

import Menu from './Menu';
import MenuItem from './MenuItem';
import { inject, observer } from 'mobx-react';

interface ISidebarProps {
  userStore?: any;
  menuStore?: any;
}

interface ISidebarState {
  /** 展开的Menu */
  openMenu: string;
  /** 当前窗口menuId */
  activeMenuId: string;
}

@inject('userStore')
@inject('menuStore')
@observer
class Sidebar extends React.Component<ISidebarProps, ISidebarState> {
  render() {
    const { userStore, menuStore } = this.props;
    return (
      <aside className="sidebar">
        <div className='user-info--container'>
          <div className='user-avatar--container'>
            <img className='user-avatar'
              src={
                userStore && userStore.user && userStore.user.gender ?
                  require('../assets/female.png') :
                  require('../assets/male.png')
              }
            />
          </div>
          <p className='user-name br-text br-text--title'>
            {userStore && userStore.user && userStore.user.userName || ''}
          </p>
        </div>

        {
          menuStore.menus.map((item, i) => {

          })
        }

        <Menu>
          <MenuItem to="/">主页</MenuItem>
          <MenuItem menu={
            <Menu>
              <MenuItem to="/test">test</MenuItem>
              <MenuItem to="/no-sidebar/test2">test2</MenuItem>
            </Menu>
          }>
            嵌套菜单
        </MenuItem>
        </Menu>
      </aside>
    );
  }
}

export default Sidebar;
